<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
         pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>员工列表</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <!-- web路径：此处的${APP_PATH}无法使用 待解决
    不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出问题。
    以/开始的相对路径，找资源，以服务器的路径为标准(http://localhost:3306)；需要加上项目名
		http://localhost:3306/crud
    -->
    <script type="text/javascript" src="static/js/jquery-1.12.4.min.js"></script>
    <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 员工修改弹出模态框开始 -->
<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">员工修改</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="empName_update_static"></p>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_update_input" placeholder="xiaowang@fzu.edu.cn">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="F">女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门名称</label>
                        <!-- 部门提交部门id -->
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_update_select"></select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
            </div>
        </div>
    </div>
</div>
<!-- 员工修改弹出模态框结束 -->

<!-- 员工新增弹出模态框开始 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="empName_add_input" class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_add_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="text" name="email" class="form-control" id="email_add_input" placeholder="xiaowang@fzu.edu.cn">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked">男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="F">女
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门名称</label>
                        <!-- 部门提交部门id -->
                        <div class="col-sm-4">
                            <select class="form-control" name="dId" id="dept_add_select"></select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 员工新增弹出模态框结束 -->


<%-- 搭建页面 --%>
<div class="container">
    <%-- 标题 --%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <%-- 按钮 --%>
    <div class="row">

        <div id="selectEmpInfoByCondition">
            <%-- 搜索框开始action="${APP_PATH}/empFind" name="empName"  name="deptName"--%>

                <div class="form-group col-md-4">
                    <input id="queryCondition" type="text" class="form-control" placeholder="员工姓名"/>
<%--                    <input id="queryByDeptName" type="text" class="form-control" placeholder="部门名称"/>--%>
                    <button id="emp_query_condition_btn" class="btn btn-primary">查询</button>
                </div>

                <!-- 上传图片 -->
                <div class="form-group col-md-4">
                    <form enctype="multipart/form-data">
                        <input type="file" id="file" name="file" onchange="uploadImg()"/>
<%--                        <button id="uploadAvatarToOss" class="btn btn-default">上传</button>--%>
                        <img class="img-rounded" id="avatarImg" width="100px" height="100px" alt="图片">
                    </form>
                </div>

             <%-- 搜索框结束 --%>
            <div class="col-md-offset-9">
                <button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
                <button class="btn btn-danger" id="emp_delete_all_btn">删除</button>
            </div>
        </div>
    </div>

    <%-- 数据表格 --%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="check_all"/>
                        </th>
                        <th>#</th>
                        <th>empName</th>
                        <th>gender</th>
                        <th>email</th>
                        <th>deptName</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>

            </table>
        </div>
    </div>
    <%-- 分页信息 --%>
    <div class="row">
        <!-- 分页文字信息 -->
        <div class="col-md-6" id="page_info_area">

        </div>
        <!--分页条-->
        <div class="col-md-6" id="page_nav_area">

        </div>
    </div>
    <script type="text/javascript">

        // 定义一个全局总记录数
        var totalResult, currentPage;

        //1、页面加载完成以后，直接去发送ajax请求,要到分页数据
        $(function(){
            //去首页
            to_page(1);
        });

        function build_emps_table(result) {
            // 清空数据
            $("#emps_table tbody").empty();

            var emps = result.extMsg.pageInfo.list;
            $.each(emps, function (index, item) {
                // alert(item.empName)
                var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                //按钮
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");

                //为编辑按钮添加一个自定义的属性，来表示当前员工id
                editBtn.attr("edit-id",item.empId);

                var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");

                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                delBtn.attr("del-id",item.empId);

                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                $("<tr></tr>").append(checkBoxTd)
                    .append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo("#emps_table tbody");
            })
        }

        // 解析显示分页信息
        function build_page_info(result){
            $("#page_info_area").empty();
            $("#page_info_area").append("当前第" + result.extMsg.pageInfo.pageNum +"页,总共" + result.extMsg.pageInfo.pages +
                "页,总共 " + result.extMsg.pageInfo.total +"记录");
            totalResult = result.extMsg.pageInfo.total;
            currentPage = result.extMsg.pageInfo.pageNum;
        }

        // 页面跳转
        function to_page(pn){
            $.ajax({
                url:"${APP_PATH}/empsnew",
                data:"pn="+pn,
                type:"GET",
                success:function(result){
                    //console.log(result);
                    //1、解析并显示员工数据
                    build_emps_table(result);
                    //2、解析并显示分页信息
                    build_page_info(result);
                    //3、解析显示分页条数据
                    build_page_nav(result);
                }
            });
        }

        // 解析显示分页条
        function build_page_nav(result) {
            $("#page_nav_area").empty();

            var ul = $("<ul></ul>").addClass("pagination");

            //构建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));

            if (result.extMsg.pageInfo.hasPreviousPage == false){
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            }else{
                firstPageLi.click(function () {
                    to_page(1);
                });

                prePageLi.click(function () {
                    to_page(result.extMsg.pageInfo.pageNum - 1)
                });
            }

            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));

            if (result.extMsg.pageInfo.hasNextPage == false){
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            }else{
                nextPageLi.click(function () {
                    to_page(result.extMsg.pageInfo.pageNum + 1);
                });

                lastPageLi.click(function () {
                    to_page(result.extMsg.pageInfo.pages);
                });
            }
            //添加首页和前一页 的提示
            ul.append(firstPageLi).append(prePageLi);
            //1,2，3遍历给ul中添加页码提示
            $.each(result.extMsg.pageInfo.navigatepageNums,function(index,item){

                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.extMsg.pageInfo.pageNum == item){
                    numLi.addClass("active");
                }

                numLi.click(function () {
                    to_page(item);
                })
                ul.append(numLi);
            });

            //添加下一页和末页 的提示
            ul.append(nextPageLi).append(lastPageLi);

            //把ul加入到nav
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");
        }

        // 清空表单样式及内容
        function reset_form(ele){
            $(ele)[0].reset();
            // 清空表单样式
            $(ele).find("*").removeClass("has-error has-success");
            $(ele).find(".help-block").text("");
        }

        // 点击新增按钮弹出模态框
        $("#emp_add_modal_btn").click(function () {
            // 每一次点击模态窗口都会清除表单数据
            reset_form("#empAddModal form");
            // $("#empAddModal form")[0].reset();

            // 发送ajax请求, 查出部门信息, 显示部门的下拉列表中
            getDepts("#dept_add_select");

            // 弹出窗口
            $("#empAddModal").modal({
                backdrop: "static"
            });
        });

        // 查出所有部门信息, 并显示在下拉列表中
        function getDepts(ele) {
            // 清空下拉列表的值
            $(ele).empty();

            $.ajax({
               url: "${APP_PATH}/getDeptInfo",
               type: "GET",
               success: function (result) {
                    // console.log(result);
                   // $("#dept_add_select")

                   $.each(result.extMsg.depts, function () {
                        var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
                        optionEle.appendTo(ele);

                   });
                }
            });
        }

        // 校验添加的数据是否合法
        function validate_add_form(){
            // 1.校验用户名, 使用正则表达式校验

            var empName = $("#empName_add_input").val();
            var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
            if (!regName.test(empName)){
                // alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
                show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
                return false;
            }else{
                // 清空这个元素之前的样式
                show_validate_msg("#empName_add_input", "success", "");
            };

            // 2.校验邮箱
            var email = $("#email_add_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)) {
                // alert("邮箱格式不正确");
                //应该清空这个元素之前的样式
                show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
                return false;
            }else{
                show_validate_msg("#email_add_input", "success", "");
            }
            return true;
        }

        // 当输入框数据发生变化的时候发送ajax请求, 告知服务器进行数据验证
        $("#empName_add_input").change(function () {
            // 发送ajax校验用户名是否可用
            var empName = this.value;
            $.ajax({
               url: "${APP_PATH}/checkuser",
               data:"empName="+empName,
               type:"POST",
               success: function (result) {
                    if (result.code == 100){
                        show_validate_msg("#empName_add_input", "success", "用户名可用");
                        $("#emp_save_btn").attr("ajax-va","success");
                    }else {
                        show_validate_msg("#empName_add_input", "error", result.extMsg.va_msg);
                        $("#emp_save_btn").attr("ajax-va","error");
                    }
               }
            });
        });

        function uploadImg() {
            var formData = new FormData();
            var file = document.getElementById("file").files[0];
            console.log("图片=" + file)
            formData.append("file", file);

            $.ajax({
                url: "${APP_PATH}/ossservice/uploadAvatar",
                type: "post",
                data: formData,
                dataType: "json",
                processData: false,//用于对data参数进行序列化处理 这里必须false
                contentType: false, //必须*/
                success: function (result) {
                    console.log(result.extMsg.url);
                    var url = result.extMsg.url;
                    $("#avatarImg").attr("src", url);
                }
            })
        }

        // 显示校验的提示信息
        function show_validate_msg(ele, status, msg){
            // 清除当前元素的样式
            $(ele).parent().removeClass("has-success has-error");
            $(ele).next("span").text("");
            if ("success" == status){
                $(ele).parent().addClass("has-success");
                $(ele).next("span").text(msg);
            } else if ("error" == status){
                $(ele).parent().addClass("has-error");
                $(ele).next("span").text(msg);
            }
        }

        // 点击保存按钮新增员工
        $("#emp_save_btn").click(function () {
            // 1.在模态窗口中点击保存按钮后将表单数据提交给服务器

            // 1.1在提前表单前要先进行校验, 成功后再保存到数据库
            // if (!validate_add_form()){
            //     return false;
            // };
            // 1.2判断之前的ajax属性值是否校验成功
            if ($(this).attr("ajax-va")=="error"){
                return false;
            }
            // 2.发送ajax请求
            $.ajax({
               url: "${APP_PATH}/emps",
               type: "POST",
               data: $("#empAddModal form").serialize(),
               success: function (result) {
                   // alert(result.msg);
                   if (result.code == 100){
                       // 员工保存成功
                       // 1.关闭模态窗口
                       $("#empAddModal").modal('hide');
                       // 2.返回到最后一页, 显示刚添加的数据
                       // 发送ajax请求显示最后一页数据
                       to_page(totalResult);
                   } else{
                       // console.log(result);
                       if (undefined != result.extMsg.errorFields.email){
                           // 显示员工邮箱的错误信息
                           show_validate_msg("#email_add_input", "error", result.extMsg.errorFields.email);
                       }
                       if (undefined != result.extMsg.errorFields.empName){
                            // 显示员工名字的错误信息
                           show_validate_msg("#empName_add_input", "error", result.extMsg.errorFields.empName);

                       }
                   }

               }
            });
        });

        $(document).on("click", ".edit_btn", function () {
            // alert("edit button")

            // 1.查出部门信息，显示部门信息
            getDepts("#empUpdateModal select");

            // 2.查询员工信息，显示员工信息
            getEmp($(this).attr("edit-id"));

            // 3.把员工的id传递给模态框的更新按钮
            $("#emp_update_btn").attr("edit-id", $(this).attr("edit-id"));

            // 弹出模态窗口
            // 弹出窗口
            $("#empUpdateModal").modal({
                backdrop: "static"
            });
        });
        
        function getEmp(id) {
            $.ajax({
                url: "${APP_PATH}/emp/"+id,
                type: "GET",
                success: function (result) {
                    // console.log(result)
                    var empData = result.extMsg.emp;
                    $("#empName_update_static").text(empData.empName);
                    $("#email_update_input").val(empData.email);
                    $("#empUpdateModal input[name=gender]").val([empData.gender]);
                    $("#empUpdateModal select").val([empData.dId]);
                }
            });
        }

        $("#emp_update_btn").click(function () {

            //验证邮箱是否合法
            //1、校验邮箱信息
            var email = $("#email_update_input").val();
            var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            if(!regEmail.test(email)){
                show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
                return false;
            }else{
                show_validate_msg("#email_update_input", "success", "");
            }

            //2、发送ajax请求保存更新的员工数据
            $.ajax({
                url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
                type:"PUT",
                // 此处可以使用type:"post" +"&_method=PUT"
                data:$("#empUpdateModal form").serialize(),
                success:function(result){
                    //alert(result.msg);
                    //1、关闭对话框
                    $("#empUpdateModal").modal("hide");
                    //2、回到本页面
                    to_page(currentPage);
                }
            });

        });

        // 删除单个员工方法
        $(document).on("click", ".delete_btn", function () {
            // 1.弹出待删除的会话框
            var empName = $(this).parents("tr").find("td:eq(2)").text();
            var empId = $(this).attr("del-id");
            if (confirm("确认删除员工【" + empName + "】的信息吗?")){
                // 点击确认后发送ajax请求
                $.ajax({
                   url: "${APP_PATH}/emp/"+empId,
                   type:"DELETE",
                   success: function (result) {
                        // alert(result.msg)
                       // 回到本页面
                       to_page(currentPage);
                   }
                });
            }
        });

        // 全选与全部选按钮
        $("#check_all").click(function () {
            // alert($(this).prop("checked"));

            $(".check_item").prop("checked", $(this).prop("checked"));

            // 当下面的框被选择满了后上面的也要跟着被选择
            //check_item
            $(document).on("click",".check_item",function(){
                //判断当前选择中的元素是否5个
                var flag = $(".check_item:checked").length==$(".check_item").length;
                $("#check_all").prop("checked", flag);
            });
        });

        // 点击全选，删除全部
        $("#emp_delete_all_btn").click(function () {

            var empNames = "";
            var del_idstr = "";

            $.each($(".check_item:checked"), function () {

                //this
                empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
                // alert($(this).parents("tr").find("td:eq(2)").text());

                //组装员工id字符串
                del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
            });

            //去除empNames多余的,
            empNames = empNames.substring(0, empNames.length-1);

            //去除删除的id多余的-
            del_idstr = del_idstr.substring(0, del_idstr.length-1);

            if(confirm("确认删除【"+empNames+"】吗?")){
                $.ajax({
                    url: "${APP_PATH}/emp/"+del_idstr,
                    type: "DELETE",
                    success: function (result) {
                        alert(result.msg);

                        // 回到当前页面
                        to_page(currentPage);
                    }
                });
            }
        });

        function build_query_emps_table(result){
            //清空table表格
            $("#emps_table tbody").empty();
            var emps = result.extMsg.list;
            $.each(emps,function(index,item){
                var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
                var empIdTd = $("<td></td>").append(item.empId);
                var empNameTd = $("<td></td>").append(item.empName);
                var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
                var emailTd = $("<td></td>").append(item.email);
                var deptNameTd = $("<td></td>").append(item.department.deptName);
                /**
                 <button class="">
                 <span class="" aria-hidden="true"></span>
                 编辑
                 </button>
                 */
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
                //为编辑按钮添加一个自定义的属性，来表示当前员工id
                editBtn.attr("edit-id",item.empId);
                var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                //为删除按钮添加一个自定义的属性来表示当前删除的员工id
                delBtn.attr("del-id",item.empId);
                var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
                //var delBtn =
                //append方法执行完成以后还是返回原来的元素
                $("<tr></tr>").append(checkBoxTd)
                    .append(empIdTd)
                    .append(empNameTd)
                    .append(genderTd)
                    .append(emailTd)
                    .append(deptNameTd)
                    .append(btnTd)
                    .appendTo("#emps_table tbody");
            });
        }

        //var empName = $("#empName_add_input").val();
        $("#emp_query_condition_btn").click(function () {
            console.log("进入员工查询方法。。。");
            var empName = $("#queryCondition").val();
            $.ajax({
                url: "${APP_PATH}/empQueryByCondition/"+empName,
                type: "POST",
                // data: $("#selectEmpInfoByCondition form").serialize(),
                success: function (result) {
                    console.log(result);
                    console.log(result.extMsg.list[0].email);
                    build_query_emps_table(result);
                }
            });

        });

        // $(document).on("click", "#uploadAvatarToOss", function () {
        //     console.log("this is uploadAvatarToOss btn");
        //
        //
        // })


    </script>

</body>
</html>
